<template>
    <view class="pupop">
        <view class="popup-box" :animation="animationData">
            <view class="pupop-btn">
                <view @tap="cancel">取消</view>
                <view @tap="confirm" style="color: #2979ff;">确定</view>
            </view>
            <picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">

                <picker-view-column>
                    <view class="item" v-for="(item, index) in cityList" :key="index">{{ item.name }}</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item, index) in areaList" :key="index">{{ item.name }}</view>
                </picker-view-column>
            </picker-view>
        </view>
        <view @tap="close" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>
    </view>
</template>

<script>
import {
    addressList
} from './data.js'
export default {
    data() {
        return {
            value: [],
            addressList,
            cityList: [
                { code: '1401', name: '太原市' }],
            areaList: [
                { code: '1401', name: '全部' },
                { code: '140105', name: '小店区' },
                { code: '140106', name: '迎泽区' },
                { code: '140107', name: '杏花岭区' },
                { code: '140108', name: '尖草坪区' },
                { code: '140109', name: '万柏林区' },
                { code: '140110', name: '晋源区' },
                { code: '140121', name: '清徐县' },
                { code: '140122', name: '阳曲县' },
                { code: '140123', name: '娄烦县' },
                { code: '140171', name: '山西转型综合改革示范区' },
                { code: '140181', name: '古交市' },
            ],
            indicatorStyle: `height: 50px;`,
            areaIndex: 0,
            animationData: {}
        }
    },
    props: {

        defaultValue: {
            type: String,
            default: () => ''
        },
        visible: {
            type: Boolean,
            default: () => false
        },
        maskCloseAble: {
            type: Boolean,
            default: () => true
        }
    },
    watch: {
        visible(val) {
            this.changeActive()
        }
    },

    methods: {

        confirm() {
            const j = this.areaIndex
            this.$emit('confirm', this.addressList[0].children[0].children[j])

        },
        cancel() {
            this.$emit('cancel')
        },
        // 动画
        changeActive() {
            var active = '-615px'
            if (this.visible) {
                active = 0
            }
            var animation = uni.createAnimation({
                duration: 400,
                timingFunction: 'linear'
            })
            animation.bottom(active).step()
            this.animationData = animation.export()
        },
        bindChange(e) {
            e.detail.value[1] = e.detail.value[1] || 0
            this.areaIndex = e.detail.value[1]
        },

        // 点击模态框
        close() {
            if (this.maskCloseAble) {
                this.cancel()
            }
        }
    }
}
</script>

<style scoped lang="scss">
.pupop {
    .popup-box {
        position: fixed;
        left: 0;
        bottom: -615px;
        z-index: 99999;
        background: #fff;
        padding-bottom: 50px;

        .pupop-btn {
            height: 40px;
            display: flex;
            align-items: center;
            padding: 0 30upx;
            justify-content: space-between;
        }
    }

    .pupop-model {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: rgba(0, 0, 0, .5);
    }

    .pupop-models {
        display: none;
    }

    .picker-view {
        width: 750rpx;
        height: 225px;
        margin-top: 20rpx;
    }

    .item {
        height: 50px;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 50px;
    }
}
</style>